<!-- 我的信息 -->
<template>
  <van-popup v-model="showFrom" class="pop-base-class" position="bottom" round style="background-color: #F5F5F5;" closeable>
    <div class="pop-base-title">完善个人信息</div>
    <div class="pop-base-content">
      <van-cell-group inset>
        <van-field v-model="form.member_name" label="真实姓名" placeholder="请输入真实姓名" input-align="right"/>
        <van-field v-model="form.member_card" label="身份证号码" placeholder="请输入身份证号码" input-align="right"/>
      </van-cell-group>
      <div>
        <div style="font-size: 16px;font-weight: bold;">{{explain_title}}</div>
        <div style="font-size: 12px;">{{explain_content}}</div>
      </div>
    </div>
    <div class="pop-base-bottom flex" @click="saveInfo">
      <van-button round type="danger" block color="var(--themeBaseColor)" style="height: 40px;">确认保存</van-button>
    </div>
  </van-popup>
</template>

<script>
import { Toast } from 'vant';

export default {
  model: {
    prop: 'showFrom',
    event: 'onEmit'
  },
  props: {
    //弹窗是否显示，默认不显示
    showFrom: {
      type: Boolean,
      default: false
    },
  },
  data () {
    return {
      form: {
        member_name: "",
        member_card: ""
      },

      explain_title: "",
      explain_content: "",
    };
  },

  mounted() {
    // this.initData();
  },
  watch: {
    // 如果 `question` 发生改变，这个函数就会运行
    showFrom: function (newQuestion, oldQuestion) {
      if(newQuestion){
        this.initData();
      }
    }
  },

  components: {},

  activated() {
  },

  methods: {
    initData(){
      this.member_name = "";
      this.member_card = "";
      this.toi = this.fun.getKeyByI();
      let that = this;
      $http.get("from.div-from.explain", {}, "添加中...").then(
        function (response) {
          console.log(response.data);
          if (response.result == 1) {
            that.explain_title = response.data.explain_title;
            that.explain_content = response.data.explain_content;
          } else {
            Toast(response.msg);
          }
        },
        function (response) {
          console.log(response);
        }
      );
      this.getMember();
    },
    onClickRight(){
      this.$emit('onEmit', false);
    },
    //获取会员信息
    getMember() {
      $http
        .get("from.div-from.getMemberInfo", "...")
        .then(response => {
          console.log(response);
          if (response.result == 1) {
            this.form.member_name = response.data.realname;
            this.form.member_card = response.data.idcard;
          }else{
            Toast(response.msg);
          }
        })
        .catch(error => {
          console.log(error);
        });
    },
    saveInfo() {
      let that = this;
      let json = {
        member_name: this.form.member_name,
        member_card: this.form.member_card,
      };
      $http.get("from.div-from.updateMemberInfo", json, "添加中...").then(
        function (response) {
          if (response.result == 1) {
            Toast("提交成功");
            that.$emit('onEmit', false);
            that.$emit('confirm', that.form);
          } else {
            Toast(response.msg);
          }
        },
        function (response) {
          console.log(response);
        }
      );
    },
  }
};

</script>
<style lang='scss' rel='stylesheet/scss' scoped>
.pop-base-class {
  .pop-base-title {
    margin: 18px 12px 12px;
    font-size: 1rem;
    font-weight: bold;
    text-align: left;
  }
  .pop-base-content {
    min-height: 45vh;
    max-height: 55vh;
    overflow: scroll;
    padding: 0 0.75rem 5rem;
  }
  .pop-base-bottom {
    padding: 0.625rem 0.875rem;
    background: #ffffff;
  }
}
</style>